<template>
	<view class="container">
		<view class="title">请输入手机号</view>
		<view class="subtitle">用于登录和绑定账号</view>

		<view class="input-group">
			<view class="country-code">+86</view>
			<input type="number" v-model="phoneNumber" placeholder="请输入手机号" class="phone-input" @input="handleInput" />
		</view>

		<button @click="validatePhoneNumber" class="submit-button">发送验证码</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: ''
			};
		},
		methods: {
			handleInput(event) {
				// 处理输入变化，如果需要，可以在这里加上更多的验证
				this.phoneNumber = event.target.value;
			},
			validatePhoneNumber() {
				if (!this.phoneNumber || this.phoneNumber.length !== 11) {
					uni.showToast({
						title: '请输入有效的手机号',
						icon: 'none'
					});
					return;
				} else {
					uni.navigateTo({
						url: '/pages/login/mobileVeriDetail'
					})
				}

				// 发送验证请求
				this.sendVerificationCode();
			},
			sendVerificationCode() {
				// 这里可以实现发送验证码的逻辑
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				});

				// TODO: 实际逻辑可以通过 API 与后端进行交互
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.subtitle {
		font-size: 16px;
		color: #666;
		margin-bottom: 30px;
	}

	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.country-code {
		font-size: 16px;
		margin-right: 10px;
	}

	.phone-input {
		flex: 1;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 10px;
		font-size: 16px;
	}

	.submit-button {
		background: linear-gradient(90deg, #80B4FF, #6699FF);
		color: white;
		border-radius: 6px;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
	}
</style>